<template>
  <el-card @update:modelValue="updateModelValue">
    <template #header>
      <div class="card-header">
        <span>推荐表信息采集</span>
      </div>
    </template>
    <div>
      <el-alert :title="'当前采集学生:'+form.name+'(学号:'+form.code+')'" type="success" :closable="false"
                style="margin-bottom: 15px;"/>
    </div>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="政治面貌" prop="politicalStatus">
        <dict-data
          clearable
          code="political"
          v-model="form.politicalStatus"
          placeholder="请选择你的政治面貌"
        />
        <div class="item-tip">请选择你的政治面貌</div>
      </el-form-item>
      <el-form-item label="外语水平" prop="foreignLanguageEvel">
        <dict-data
          clearable
          code="f_language_level"
          v-model="form.foreignLanguageEvel"
          placeholder="请选择外语水平"
        />
        <div class="item-tip">请选择你的外语水平</div>
      </el-form-item>
      <el-form-item label="计算机水平" prop="computerLevel">
        <dict-data
          clearable
          code="computer_level"
          v-model="form.computerLevel"
          placeholder="请选择计算机水平"
        />
        <div class="item-tip">请选择你的算机水平</div>
      </el-form-item>
      <el-form-item label="职业资格证书" prop="qualification">
        <el-input
          clearable
          v-model="form.qualification"
          placeholder="请输入你已获得的职业资格证书"
        />
        <div class="item-tip">请输入你所获得的职业资格证书，如：1.教师资格证；2.建造师；3.思科认证证书...</div>
      </el-form-item>
      <el-form-item label="求职意向" prop="jobIntention">
        <el-input
          clearable
          v-model="form.jobIntention"
          placeholder="请输入你的求职意向"
        />
        <div class="item-tip">请输入你的求职意向，如：平面设计师、软件开发工程师、产品经理、数据分析师、公务员...</div>
      </el-form-item>
      <el-divider/>
      <el-form-item label="实践经历" prop="workContent1">
        <el-input
          clearable
          v-model="form.workContent1"
          placeholder="请输入你的实践经历"
        />
      </el-form-item>
      <el-form-item label=" " prop="workContent2">
        <el-input
          clearable
          v-model="form.workContent2"
          placeholder="请输入你的实践经历"
        />
      </el-form-item>
      <el-form-item label=" " prop="workContent3">
        <el-input
          clearable
          v-model="form.workContent3"
          placeholder="请输入你的实践经历"
        />
      </el-form-item>
      <el-form-item label=" " prop="workContent4">
        <el-input
          clearable
          v-model="form.workContent4"
          placeholder="请输入你的实践经历"
        />
      </el-form-item>
      <el-form-item label=" " prop="workContent5">
        <el-input
          clearable
          v-model="form.workContent5"
          placeholder="请输入你的实践经历"
        />
      </el-form-item>
      <el-form-item label=" ">
        <div class="item-tip">
          <table>
            <tr>
              <td>
                可以填写在校工作经历和校外工作经历，格式参考如下：
              </td>
            </tr>
            <tr>
              <td>2023年6月-2024年8月，参加厦门万策智业有限公司实训</td>
            </tr>
            <tr>
              <td>2022年9月-2023年5月，担任系组织部部长</td>
            </tr>
          </table>
        </div>
      </el-form-item>
      <el-divider/>
      <el-form-item label="荣誉奖项" prop="rewardPunishmentPrize1">
        <el-input
          clearable
          v-model="form.rewardPunishmentPrize1"
          placeholder="请输入你的荣誉奖项"
        />
      </el-form-item>
      <el-form-item label=" " prop="rewardPunishmentPrize2">
        <el-input
          clearable
          v-model="form.rewardPunishmentPrize2"
          placeholder="请输入你的荣誉奖项"
        />
      </el-form-item>
      <el-form-item label=" " prop="rewardPunishmentPrize3">
        <el-input
          clearable
          v-model="form.rewardPunishmentPrize3"
          placeholder="请输入你的荣誉奖项"
        />
      </el-form-item>
      <el-form-item label=" " prop="rewardPunishmentPrize4">
        <el-input
          clearable
          v-model="form.rewardPunishmentPrize4"
          placeholder="请输入你的荣誉奖项"
        />
      </el-form-item>
      <el-form-item label=" " prop="rewardPunishmentPrize5">
        <el-input
          clearable
          v-model="form.rewardPunishmentPrize5"
          placeholder="请输入你的荣誉奖项"
        />
      </el-form-item>
      <el-form-item label=" ">
        <div class="item-tip">
          <table>
            <tr>
              <td>
                可以填写校内外获得的奖项，格式参考如下：
              </td>
            </tr>
            <tr>
              <td>2010-2011学年上学期，获二等奖学金</td>
            </tr>
            <tr>
              <td>2009-2010学年下学期，获福州大学至诚学院优秀学生干部</td>
            </tr>
            <tr>
              <td>2009-2010学年，获福州大学羽毛球比赛团体第三名</td>
            </tr>
          </table>
        </div>
      </el-form-item>
      <el-divider/>
      <el-form-item label="所在系意见" prop="departmentOpinion">
        <el-input
          clearable
          v-model="form.departmentOpinion"
          placeholder="请输入所在系意见"
          type="textarea"
          :rows="6"
        />
        <div class="item-tip">根据辅导员要求，填写所在系意见，按第三人称形式书写</div>
      </el-form-item>
      <div style="text-align: center;">
        <el-button @click="goBack">返回上一步</el-button>
        <el-button type="primary" @click="goNext" :loading="loading">提交，前往下一步</el-button>
      </div>
    </el-form>
  </el-card>
</template>


<script setup>
import {reactive, ref} from 'vue';
import {EleMessage} from 'ele-admin-plus/es';
import {useFormData} from '@/utils/use-form-data';
import {selectStudentRecommendInfo, submitRecommendInfo} from "@/api/student/index.js";

const emit = defineEmits(['update:modelValue']);

const props = defineProps({
  modelValue: Number,
});

/** 提交状态 */
const loading = ref(false);


/** 表单实例 */
const formRef = ref(null);


/** 更新modelValue */
const updateModelValue = (value) => {
  emit('update:modelValue', value);
};


const [form, resetFields, assignFields] = useFormData({

  name: '',
  code: '',

  politicalStatus: '',//政治面貌
  foreignLanguageEvel: '',//外语水平
  computerLevel: '',//计算机水平
  jobIntention: '',//求职意向
  //在校奖惩情况
  rewardPunishmentPrize1: '',
  rewardPunishmentPrize2: '',
  rewardPunishmentPrize3: '',
  rewardPunishmentPrize4: '',
  rewardPunishmentPrize5: '',

  //在校工作及实习实践经历
  workContent1: '',
  workContent2: '',
  workContent3: '',
  workContent4: '',
  workContent5: '',

  //职业资格证书
  qualification: '',

  //所在系意见
  departmentOpinion: '',
});


/** 表单验证规则 */
const rules = reactive({
  politicalStatus: [
    {
      required: true,
      message: '请选择政治面貌',
      trigger: 'blur',
    },
  ],
  foreignLanguageEvel: [
    {
      required: true,
      message: '请选择外语水平',
      trigger: 'blur',
    },
  ],
  computerLevel: [
    {
      required: true,
      message: '请选择计算机水平',
      trigger: 'blur',
    },
  ],
  qualification: [
    {
      required: true,
      message: '请输入你已获得的职业资格证书，若没有请填写“无',
      trigger: 'blur',
    },
    {max: 200, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  jobIntention: [
    {
      required: true,
      message: '请输入你已获得的求职意向，若没有请填写“无',
      trigger: 'blur',
    },
    {max: 200, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  departmentOpinion: [
    {max: 500, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  workContent1: [
    {max: 148, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  workContent2: [
    {max: 148, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  workContent3: [
    {max: 148, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  workContent4: [
    {max: 148, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  workContent5: [
    {max: 148, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  rewardPunishmentPrize1: [
    {max: 148, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  rewardPunishmentPrize2: [
    {max: 148, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  rewardPunishmentPrize3: [
    {max: 148, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  rewardPunishmentPrize4: [
    {max: 148, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ],
  rewardPunishmentPrize5: [
    {max: 148, message: '输入内容过长，可能会影响打印效果，请精简输入内容', trigger: 'blur'}
  ]
});
//提交
const goNext = () => {
  let index = props.modelValue;
  formRef.value?.validate?.((valid) => {
    if (!valid) {
      return;
    }
    loading.value = true;
    submitRecommendInfo(form)
      .then((msg) => {
        loading.value = false;
        EleMessage.success("保存成功，请确认填写内容");
        updateModelValue(++index);
      })
      .catch((e) => {
        loading.value = false;
        EleMessage.error(e.message);
      });
  });
}


//返回上一步
const goBack = () => {
  let index = props.modelValue;
  updateModelValue(--index);
}


const selectRecommendInfo = () => {
  selectStudentRecommendInfo().then(
    response => {


      form.name = response.data.name;
      form.code = response.data.code;

      form.politicalStatus = response.data.politicalStatus;//政治面貌
      form.foreignLanguageEvel = response.data.foreignLanguageEvel;//外语水平
      form.computerLevel = response.data.computerLevel;//计算机水平
      form.jobIntention = response.data.jobIntention;//求职意向
      form.qualification = response.data.qualification;//职业资格证书


      form.rewardPunishmentPrize1 = response.data.rewardPunishmentPrize1;//职业资格证书
      form.rewardPunishmentPrize2 = response.data.rewardPunishmentPrize2;//职业资格证书
      form.rewardPunishmentPrize3 = response.data.rewardPunishmentPrize3;//职业资格证书
      form.rewardPunishmentPrize4 = response.data.rewardPunishmentPrize4;//职业资格证书
      form.rewardPunishmentPrize5 = response.data.rewardPunishmentPrize5;//职业资格证书

      form.workContent1 = response.data.workContent1;//职业资格证书
      form.workContent2 = response.data.workContent2;//职业资格证书
      form.workContent3 = response.data.workContent3;//职业资格证书
      form.workContent4 = response.data.workContent4;//职业资格证书
      form.workContent5 = response.data.workContent5;//职业资格证书

      form.departmentOpinion = response.data.departmentOpinion;//所在系意见
    });
}

//加载学生推荐表信息
selectRecommendInfo();


</script>
